<template>
    <div style="padding: 1rem">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0">
            <el-form :inline="true" :model="filters">
                <el-form-item label="账户查询:">
                    <el-autocomplete
                        v-model="filters.username"
                        :fetch-suggestions="querySearchAsync"
                        @select="handleSelect"
                        icon="circle-close"
                        :on-icon-click="handleOrderIconClick"
                        @keyup.enter.native="search"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="客户手机号:">
                    <el-input
                        v-model="filters.mobile"
                        placeholder="客户手机号"
                        icon="circle-close"
                        :on-icon-click="handleOrderIconClick"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="订单编号:">
                    <el-input
                        v-model="filters.orderId"
                        placeholder="订单编号"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="快递单号:">
                    <el-input
                        v-model="filters.logisticsNumber"
                        placeholder="快递单号"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="订单状态:">
                    <el-select v-model="filters.orderDealStatus" placeholder="请选择" @change="search">
                        <el-option v-for="item in orderDealStatus" :key="item.id" :label="item.label"
                                   :value="item.value">{{
                            item.label }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商城子编号:">
                    <el-input
                        v-model="filters.subOrderId"
                        placeholder="订单编号"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="收货人姓名:">
                    <el-input
                        v-model="filters.acceptName"
                        placeholder="收货人姓名"
                        icon="circle-close"
                        @keyup.enter.native="search"
                    />
                </el-form-item>
                <el-form-item label="下单时间:">
                    <el-date-picker
                        v-model="filters.startTime"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    />
                    -
                    <el-date-picker
                        v-model="filters.endTime"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-download" @click="orderOut()">订单导出</el-button>
                </el-form-item>
                <br>
                <el-form-item style="color: red">
                    <p style="padding: 0;margin: 0">注意事项：</p>
                    <span>1、本页面支持2020年1月1日（包括1日）之后的快递信息查询</span>
                    <br>
                    <span>2、默认显示快递到达一天之内未签收的订单</span>
                    <br>
                    <span>3、请申报人及时通知用户签收订单</span><br>
                    <span>4、警告：未及时通知客户签收的，会造成退单损失！！！</span>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table
            v-loading="listLoading"
            :data="list"
            align="center"
            class="orderList"
            size="small"
            style="margin-top: 1rem"
            tooltip-effect="dark"
            border
        >
            <el-table-column
                type="selection"
                width="55"
            />
            <el-table-column prop="orderId" label="订单编号" width="110"/>
            <el-table-column prop="subOrderId" label="商城子编号" width="110"/>
            <el-table-column prop="mobile" label="客户手机号" width="110"/>
            <el-table-column prop="sumPrice" label="积分值" width="80"/>
            <el-table-column prop="acceptName" label="收货人姓名" width="100"/>
            <el-table-column prop="acceptMobile" label="收货手机号" width="110"/>
            <el-table-column prop="productDetails" label="商品信息" width="200"/>
            <el-table-column prop="logisticsNumber" label="快递单号"/>
            <el-table-column prop="logisticsCompany" label="配送方式" width="100"/>
            <el-table-column prop="address" label="配送地址" width="120"/>
            <el-table-column prop="detailedAddress" label="详细地址" width="80"/>
            <el-table-column prop="placeTime" label="下单时间" width="140"/>
            <el-table-column prop="logisticsUtime" label="物流最新时间" width="140"/>
            <el-table-column prop="username" label="操作人" width="80"/>
            <el-table-column prop="statusName" label="订单状态" width="80"/>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-tooltip content="物流信息" placement="top">
                        <el-button
                            size="mini"
                            type="success"
                            icon="el-icon-message"
                            circle
                            @click="handleDetail(scope.$index,scope.row)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-bottom: 2rem;">
            <el-col :span="12" class="toolbar">
                <el-pagination
                    :page-sizes="[10,20, 50, 100]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
        </el-row>

        <!--物流信息-->
        <el-dialog
            width="40%"
            :close-on-click-modal="false"
            title="物流信息"
            center
            class="wlInfo"
            :visible.sync="dialogFormVisibleDetail"
            @close="closeDialogDetail('infoForm')"
        >
            <el-timeline :reverse="reverse" v-if="haveInfo">
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.ftime"
                >
                    {{ activity.context }}
                </el-timeline-item>
            </el-timeline>
            <span v-else>暂无物流信息</span>
        </el-dialog>
    </div>
</template>

<script>
    import {findNoSignPage, goodsInfo, unclearOrderList, exportExcel} from '../../api/modeList'
    import NProgress from "nprogress";
    import moment from "moment";
    import {formatDateTime} from "../../utils";

    export default {
        name: "noSign",
        data() {
            return {
                filters: {
                    username: '',
                    mobile: null,
                    orderId: null,
                    logisticsNumber: null,
                    logisticsStatus: null,
                    subOrderId: null,
                    acceptName: null,
                    userId: null,
                    startTime: '2020-01-01 00:00:00',
                    endTime: null,
                    orderDealStatus: 5,
                },

                orderDealStatus: [
                    {
                        value: null,
                        label: '全部'
                    },
                    {
                        value: 0,
                        label: '在途中'
                    }, {
                        value: 1,
                        label: '已揽件'
                    },
                    {
                        value: 2,
                        label: '问题件'
                    },
                    {
                        value: 3,
                        label: '已签收'
                    },
                    {
                        value: 4,
                        label: '已退签'
                    },
                    {
                        value: 5,
                        label: '已派件'
                    },
                    {
                        value: 6,
                        label: '已退回'
                    },
                    {
                        value: 7,
                        label: '已转投'
                    }
                ],
                statusInfo: 0,
                list: [],
                listLoading: false,
                total: 0,
                size: 10,
                pageNo: 1,

                dialogFormVisibleDetail: false, // 物流模态框
                reverse: false,
                activities: {
                    context: '',
                    ftime: ''
                },
                haveInfo: false,
            }
        },
        mounted() {
            this.statusInfo = sessionStorage.getItem('statusInfo');
            this.getList()
        },
        methods: {
            search() {
                // 搜索 根据当前后台的逻辑搜索的时候永远将页码置于1
                this.pageNo = 1;
                this.getList()
            },
            querySearchAsync(queryString, cb) {
                let param = {
                    username: this.filters.username
                };
                unclearOrderList(param).then((res) => {
                    if (res.data.code === 0) {
                        this.restaurants = res.data.Data;
                        this.restaurants.map((val) => {
                            val.value = val.username
                        });
                        clearTimeout(this.timeout);
                        this.timeout = setTimeout(() => {
                            cb(this.restaurants);
                        }, 1000 * Math.random());
                    } else {
                        this.filters.sysUserId = null
                    }
                })

            },
            handleSelect(item) {

            },
            getList() {
                if (this.filters.startTime != null) {
                    this.filters.startTime = moment(this.filters.startTime).format('YYYY-MM-DD 00:00:00')
                }
                if (this.filters.endTime != null) {
                    this.filters.endTime = moment(this.filters.endTime).format('YYYY-MM-DD 23:59:59')
                }
                let params = {
                    currPage: this.pageNo,
                    pageSize: this.size,
                    username: this.filters.username,
                    mobile: this.filters.mobile,
                    // status: this.filters.orderDealStatus,
                    startTime: this.filters.startTime,
                    endTime: this.filters.endTime,
                    orderId: this.filters.orderId,
                    subOrderId: this.filters.subOrderId,
                    sysUserId: this.filters.sysUserId,
                    acceptName: this.filters.acceptName,
                    logisticsNumber: this.filters.logisticsNumber,
                    logisticsState: this.filters.orderDealStatus
                };
                NProgress.start();
                this.listLoading = true;
                findNoSignPage(params).then((res) => {
                    if (res.data.code === 0) {
                        const data = res.data.data;
                        this.orderSums = (data.orderSum - data.declareSum) * 100;
                        this.list = data.records;
                        this.size = data.size;
                        this.total = data.total;
                        const len = this.list.length;
                        if (len === 0 && this.pageNo > 1) {
                            this.pageNo -= 1;
                            this.getList()
                        }
                        this.list.map(val => {
                            switch (val.logisticsState) {
                                case -1:
                                    val.statusName = '未发货';
                                    break;
                                case 0:
                                    val.statusName = '在途中';
                                    break;
                                case 1:
                                    val.statusName = '已揽件';
                                    break;
                                case 2:
                                    val.statusName = '问题件';
                                    break;
                                case 3:
                                    val.statusName = '已签收';
                                    break;
                                case 4:
                                    val.statusName = '已退签';
                                    break;
                                case 5:
                                    val.statusName = '已派件';
                                    break;
                                case 6:
                                    val.statusName = '已退回';
                                    break;
                                case 7:
                                    val.statusName = '已转投';
                                    break;
                            }
                            val.sumPrice = parseInt((val.sumAmount) * 100);
                            const placeTime = new Date(val.placeTime);
                            val.placeTime = formatDateTime(placeTime);
                            if (val.logisticsUtime == null) {
                                val.logisticsUtime = ''
                            } else {
                                const logisticsUtime = new Date(val.logisticsUtime);
                                val.logisticsUtime = formatDateTime(logisticsUtime);
                            }
                        })
                    } else {
                        this.total = 0;
                        this.list = [];
                        this.$message({
                            type: 'error',
                            message: res.data.msg,
                            duration: 1000
                        });
                    }
                    NProgress.done();
                    this.listLoading = false
                })
            },
            handleDetail(index, row) { // 查看物流信息
                this.dialogFormVisibleDetail = true;
                const param = {
                    orderId: row.orderId
                };
                goodsInfo(param).then((res) => {
                    if (res.data.code === 0) {
                        this.activities = res.data.Data;
                        this.haveInfo = true;
                    } else {
                        this.haveInfo = false;
                    }
                })
            },
            orderOut() {
                if (this.filters.startTime != null) {
                    this.filters.startTime = moment(this.filters.startTime).format('YYYY-MM-DD 00:00:00')
                }
                if (this.filters.endTime != null) {
                    this.filters.endTime = moment(this.filters.endTime).format('YYYY-MM-DD 23:59:59')
                }
                let params = {
                    username: this.filters.username,
                    mobile: this.filters.mobile,
                    // status: this.filters.orderDealStatus,
                    startTime: this.filters.startTime,
                    endTime: this.filters.endTime,
                    orderId: this.filters.orderId,
                    subOrderId: this.filters.subOrderId,
                    sysUserId: this.filters.sysUserId,
                    acceptName: this.filters.acceptName,
                    logisticsNumber: this.filters.logisticsNumber,
                };
                exportExcel(params).then((res) => {
                    const fileName = '订单列表';
                    const link = document.createElement('a');
                    const tourl = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}))
                    link.href = tourl;
                    link.target = '_blank';
                    link.download = fileName;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link)
                })
            },




            closeDialogDetail() {
                this.activities = '';
            },
            handleOrderIconClick() {
            },
            // 分页
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getList();
            },
            // 分页显示条数
            handleSizeChange(val) {
                this.size = val;
                this.getList()
            }
        }
    }
</script>

<style scoped>

</style>
